<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta charset="utf-8" />
        <meta http-equiv="expires" content="0" />
        <meta name="language" content="de" />
        <meta name="viewport" content="user-scalable=no,width=device-width" />
        <title>Audi MMI</title>

        <!-- CSS -->
        <link rel="stylesheet" href="./Audi_MMI_Files/styles_basics.css" type="text/css">
        <link rel="stylesheet" href="./Audi_MMI_Files/styles_list_basics.css" type="text/css">
        <link rel="stylesheet" href="./Audi_MMI_Files/styles_list_conversations.css" type="text/css">
		<link rel="stylesheet" href="./Audi_MMI_Files/style_routeDetail.css" type="text/css">
		
		

        <!-- JS -->
        <script type="text/javascript" src="./Audi_MMI_Files/controls_key_mappings.js"></script>
        <script type="text/javascript" src="./Audi_MMI_Files/controls_helpers.js"></script>
		<script type="text/javascript" src="./Audi_MMI_Files/controls_softkeys_basics.js"></script>
        <script type="text/javascript" src="./Audi_MMI_Files/controls_screen_routes_details_softkeys.js"></script>
        <script type="text/javascript">
			function fillElems(){
			
				var elem=JSON.parse(sessionStorage.getItem('selectedRoute'));
		
				document.getElementById('distance').innerHTML=elem.distance;
				document.getElementById('direction').innerHTML=elem.distToStart;	
				document.getElementById('poi').innerHTML=elem.poi;
				document.getElementById('com1').innerHTML=elem.com1;
				document.getElementById('com2').innerHTML=elem.com2;
				document.getElementById('name').innerHTML=elem.routeName;	
				document.getElementById('tags').innerHTML=elem.tags;
				document.getElementById('GesamtRating').innerHTML=getStarImage(elem.avgRating);				
			}
        </script>
</head>

<body onload="fillElems()" onkeydown="navigationList(event)" onmousewheel="scroll(event)">
        <div id="mainScreenSubheadline">
                <div id="topPanel">
                        <div id="softKeyLeftTop" class="softKey softKeyTop softKeyLeft">
                                  Hauptmen&uuml;
                        </div>
                        <span id="headline">Routen</span>
                        <div id="softKeyRightTop" class="softKey softKeyTop softKeyRight">
                                  Beschreibung
                        </div>
                </div>
                <div id="contentPanel">
                        <div id="subHeadline">
                                Details
                        </div>
                        
                        <div style="position:absolute; top:115px; left:30px;">
							<table border="0" cellspacing="0" cellpadding="5">
							<tr><td>
									<img src="./images/routedetail.png" width="259" height="152">
								</td>
								<td valign="top"><b><div id="name">Munich's Finest</div> <div id="GesamtRating"></div></b>
								
								 
								<table border="0" cellspacing="4" cellpadding="4">
									<tr><td>Tags:</td><td> <div id="tags"> </div></td></tr>
									<tr><td>Distanz:</td><td> <div id="distance">32</div></td></tr>
									<tr><td>Start:</td><td> <div id="direction">3 km (W)</div></td></tr>
									<tr><td>POI:</td><td> <div id="poi">4</td></tr>
								</table>
							</tr></td></table>
							
							<hr noshade color="white" width="720" size="1" align="left">
							
							<table border="0" cellspacing="0" width="900">
							<tr><td width="50%"><img src="./images/sterne_Ranking/5sterne_klein.png"></td><td width="50%"><img src="./images/sterne_Ranking/4sterne_klein.png"></tr></td>
							<tr><td><div id="com1">Wahnsinns-Strecke! Immer wieder...</div></td><td><div id="com2">Diese Strecke bietet viel!</div>
							</tr></td></table>
							<img src="images/scrollbarUnten.png" width="700">
						</div>
                </div>
                <div id="bottomPanel">
                        <div id="softKeyLeftBottom" class="softKey softKeyBottom softKeyLeft">
                               Zur&uuml;ck
                        </div>
                        <div id="softKeyRightBottom" class="softKey softKeyBottom softKeyRight">
                                Starten
                        </div>
                </div>
                <div id="statusScreen">
                </div>
        </div>
</body>
</html>